<template>
    <el-collapse-item v-if="enable" :name="name">
    <template #title>
        <span style="padding-left:20px">
          表单设置<el-icon class="header-icon"><info-filled /></el-icon>
        </span>
     </template>
     <Form
          :element="element"
          :bpmnModeler="bpmnModeler"
          :formOptions = "formOptions"
        />
  </el-collapse-item>
</template>
<script>
import Form from './parts/Form.vue'
import formDefinitionService from '@/api/flowable/formDefinitionService'
import { is } from 'jeeplus-bpmn/lib/util/ModelUtil'
export default {
  components: {
    Form
  },
  data () {
    return {
      formOptions: []
    }
  },
  props: {
    element: {
      type: Object,
      default: undefined
    },
    bpmnModeler: {
      type: Object,
      default: undefined
    },
    name: ''
  },
  computed: {
    enable () {
      if (!this.ensureFormKeyAndDataSupported(this.element)) {
        return false
      } else {
        return true
      }
    }
  },
  created () {
    formDefinitionService.list({
      'current': 1,
      'size': -1,
      'formDefinitionJson.status': 1
    }).then((data) => {
      data.records.forEach((item) => {
        this.formOptions.push({id: item.id, name: item.name, jsonId: item.formDefinitionJson.id, version: item.formDefinitionJson.version, json: item.formDefinitionJson.json})
      })
    })
  },
  methods: {
    ensureFormKeyAndDataSupported (element) {
      return (
        is(element, 'bpmn:StartEvent') && !is(element.parent, 'bpmn:SubProcess')
      ) || is(element, 'bpmn:UserTask')
    }
  }
}
</script>